<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>jquerytest</title>
		<meta name="description" content="Test page for jQuery functions" />
		<meta name="author" content="Joe" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<style type="text/css">
			header {
				min-height: 50px;
	 			background-color: #006DCC; 
	 			color: #fff;
			}

			nav {
				width: 150px;
				min-height: 400px;
				float:left;
				background-color:#942A25; 
				color: #fff; 
			}
			div#content {
				margin: 30px;
				width: 70%;
				float: left;
			}
			footer {float:left;}
			.joe {background:#AD6704;
				color:#002A80;
				margin: 5px;
				border: solid purple 5px;
				height: 30px;
				width: 60px;
				}
		</style>
	</head>

	<body>
		<div>
			<header>
				<h1>jQuery Test</h1>
			</header>
			<nav>
				<p>
					<a href="/">Home</a>
				</p>
				<p>
					<a href="/contact">Contact</a>
				</p>
			</nav>

			<div id="content">
				<h2>This is my jQuery Test page</h2>
				<br />
				<h3>This is my UL</h3>
				<ul>
					<li class="joe1">
						<a name="link1" id="link1" href="#">link1</a>
					</li>
					<li>
						<a name="link2" id="link2" href="#">link2</a>
					</li>
				</ul>
				<br />
				<h3>This is my form</h3>
				<form class="" action="" method="post">
					<div class="">
						<label class="" for="line_1">Line 1:</label>
						<div class="">
							<input type="text" name="line_1" id="line_1" value="" />
						</div>
					</div>
					<div class="">
						<label class="" for="line_2">Line 2:</label>
						<div class="">
							<input type="text" name="line_2" id="line_2" value="" />
						</div>
					</div>
				</form>	
			</div>

			<footer>
				<p>
					&copy; Copyright 2012 by Joe Gentile
				</p>
			</footer>
		</div>
		<script>
		// Function to test traversal functions
		$(function(){
			
			// test add() and css()
			$("ul").add("li.joe1").css("background", "yellow");
		    
		    // test nextAll() and andSelf() and internal stack    
		    $("div#content").add("h3").nextAll().andSelf()
		    	.css("color", "green").css("font-weight","strong")
		    	;
		    
		        
		});
		$("form").hover(function(){
			$(this).append("<p class=\"joe\">This is a form where you enter data</p>")
		});
		
		
		//test is(), slideUp(), slideDown(), click(), html(), and :last
		$("ul li a:last").click(function(event) { 
  			var $target = $(event.target);
  			if ( $target.is("a") )
  				$target.css("color", "red");
  				$target.slideUp().slideDown().html("hello");
  		});
		// test map(), append(), get(), join(), and after(), toggle()
		$("form").after("<span>Click me to test map()</span>");
		$("span:first").click(function(event){
			$(event.target).slideUp().slideDown();
			$("span").append( $("input").map(function(){
      			return $(this).val();
    		}).get().join(", ") );
    		
    		//test toggle
    		$("footer").toggle();
   		});
		$("span").after("<br /><span>Click me to test toggleClass() </span>");
		$("span:last").click(function(event){
			//test toggle
    		$("li").live().toggleClass("joe");
   		});
		
		</script>
	</body>
</html>
